<template>
  <div>
    <TopBar @drawCommand="setDrawType" @markerCommand="setMarkerType" />
    <MapView :drawType="drawType" :markerType="markerType" />
  </div>
</template>

<script>
import { ref } from "vue";
import TopBar from "./components/TopBar.vue";
import MapView from "./components/MapView.vue";

export default {
  name: "App",
  components: { TopBar, MapView },
  setup() {
    const drawType = ref(null);
    const markerType = ref(null);

    const setDrawType = (type) => {
      drawType.value = type;
      markerType.value = null; // 清除标记交互
    };

    const setMarkerType = (type) => {
      markerType.value = type;
      drawType.value = null; // 清除绘图交互
    };

    return {
      drawType,
      markerType,
      setDrawType,
      setMarkerType,
    };
  },
};
</script>
